<template>
    <a-layout-sider
        collapsible
        :trigger="null"
        v-model="collapsed"
        theme="dark"
        width="250px"
        style=""
    >
        <Logo :collapsed="collapsed"/>
        <a-menu
            :defaultSelectedKeys="['0']"
            :defaultOpenKeys="['0']"
            mode="inline"
            theme="dark"
            :inlineCollapsed="collapsed"
            @click="onItemClick"
        >
            <MyTreeMenu v-for="item in menuData" :model="item" :key="item.id"/>
        </a-menu>
    </a-layout-sider>
</template>

<script>
    import {mapState, mapGetters, mapMutations} from 'vuex';
    import MyTreeMenu from './MyTreeMenu';
    import Logo from './Logo';


    /**
     *
     * @param list 比对的列表
     * @param comKey 要比对的key
     */
    const getMenu= (list, comKey)=>{
        if(!list || list.length===0){
            return null;
        }
        console.log('getMenu start');
        for(let i =0,len=list.length; i<len; i++){
            let data = list[i];
            let key = data.id;
            let {children} = data;
            if(key === comKey){
                return data;
            }else {
                let res = getMenu(children, comKey);
                if(res){
                    return res;
                }
            }
        }
        return null;
    }



    export default {
        name: "Sider",
        data() {
            return {
            }
        },
        components: {
            MyTreeMenu,
            Logo,
        },
        computed: {
            ...mapState('index', {
                collapsed: (state)=>state.collapsed,
                menuData: (state)=>state.menuData,
            }),
        },
        methods: {
            ...mapMutations('index',{
                getMenuItem: 'getMenuItem',
            }),
            onItemClick({item, key, keyPath}){
                console.log(item, 'onItemClick item');
                console.log(key, 'onItemClick key');
                console.log(keyPath, 'onItemClick keyPath');
                let menu= this.getMenuByKey(key);
                let {path} = menu||{};
                console.log(path, 'path');
                if(path){
                    this.$router.replace(path);
                }
            },
            getMenuByKey(key){
                let {menuData} = this;
                let menu = getMenu(menuData,key);
                console.log(menu, 'getMenuByKey');
                let route = this.$router.resolve('/admin/home');
                console.log(route, 'resolve route');
                return menu;
            },
        },
    }
</script>

<style scoped>


</style>
